<template>
	<view class="flex flex-col items-center justify-center">
		<view class="relative w-full h-[30vh] bg-[#fec504]">
			<view class="p-4 mt-4">我的</view>
			<view
				class="w-[90vw] absolute top-[50%] left-1/2 transform -translate-x-1/2"
			>
				<!-- 头像信息 -->
				<view
					class="relative w-full h-[25vh] rounded-md bg-[#fff] mt-10"
				>
					<view
						@tap="handleClick"
						class="absolute top-[-30rpx] left-1/2 transform -translate-x-1/2 easy_center_y"
					>
						<nut-avatar size="large">
							<img :src="userInfo.avatarUrl" />
						</nut-avatar>
						<view class="mt-2" v-if="!userInfo.nickName">
							请登录</view
						>
						<view class="mt-2" v-else>
							{{ userInfo.nickName }}</view
						>
					</view>
					<view
						class="absolute bottom-[30rpx] h-[30%] easy_center w-full"
					>
						<view class="w-[20vw] mr-20">
							<view class="easy_center_y"
								><image
									class="w-[6vw] h-[6vw]"
									src="../../assets/soap.svg"
								/><view class="mt-1">皂方数{{ 0 }}</view></view
							>
						</view>
						<view class="w-[20vw]"
							><view class="easy_center_y"
								><image
									class="w-[6vw] h-[6vw]"
									src="../../assets/like.svg"
								/><view class="mt-1">收藏数{{ 0 }}</view></view
							>
						</view>
					</view>
				</view>
				<!-- 账号信息 -->
				<view
					class="h-[15vh] bg-[#fff] rounded-md mt-4 p-4 easy_between_y"
				>
					<view>我的账号</view>
					<view class="easy_between easy_between">
						<view
							class="w-[20vw]"
							@tap="handleCompute('myFormula')"
						>
							<view class="easy_center_y"
								><image
									class="w-[8vw] h-[8vw]"
									src="../../assets/soap2.svg"
								/><view class="text-sm">我的皂方</view></view
							>
						</view>
						<view class="w-[20vw]" @tap="handleCompute('collect')">
							<view class="easy_center_y"
								><image
									class="w-[8vw] h-[8vw]"
									src="../../assets/like2.svg"
								/><view class="text-sm">我的收藏</view></view
							>
						</view>
						<view
							class="w-[20vw]"
							@tap="handleCompute('reference')"
						>
							<view class="easy_center_y"
								><image
									class="w-[8vw] h-[8vw]"
									src="../../assets/book.svg"
								/><view class="text-sm">参考皂方</view></view
							>
						</view>
						<view class="w-[20vw]" @tap="handleCompute('notice')">
							<view class="easy_center_y"
								><image
									class="w-[7vw] h-[8vw]"
									src="../../assets/bell.svg"
								/><view class="text-sm">我的消息</view></view
							>
						</view>
					</view>
				</view>
				<!-- 我的服务 -->
				<view class="bg-[#fff] rounded-md mt-4 mb-6 pr-4 pl-4 pt-4">
					<view class="mb-2">我的服务</view>
					<view @tap="handleCompute('about')">
						<view
							class="h-[7vh] easy_between border-b-2 border-[#f7f8fa]"
						>
							<view class="easy_between">
								<image
									class="w-[5vw] h-[5vw] mr-2"
									src="../../assets/advice.svg"
								/>
								<view>建议反馈</view>
							</view>
							<image
								class="w-[5vw] h-[5vw]"
								src="../../assets/rightArrow.svg"
							/>
						</view>
						<view
							class="h-[7vh] easy_between border-b-2 border-[#f7f8fa]"
						>
							<view class="easy_between">
								<image
									class="w-[5vw] h-[5vw] mr-2"
									src="../../assets/contact.svg"
								/>
								<view>联系作者</view>
							</view>
							<image
								class="w-[5vw] h-[5vw]"
								src="../../assets/rightArrow.svg"
							/>
						</view>
						<view class="h-[7vh] easy_between">
							<view class="easy_between">
								<image
									class="w-[5vw] h-[5vw] mr-2"
									src="../../assets/about.svg"
								/>
								<view>关于我们</view>
							</view>
							<image
								class="w-[5vw] h-[5vw]"
								src="../../assets/rightArrow.svg"
							/>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro';
import { ref, onMounted, reactive } from 'vue';

const userInfo = reactive({
	nickName: '',
	avatarUrl: '',
});

// 获取用户信息
const getUserInfo = () => {
	const cachedUserInfo = Taro.getStorageSync('userInfo');
	if (cachedUserInfo) {
		userInfo.nickName = cachedUserInfo.nickName;
		userInfo.avatarUrl = cachedUserInfo.avatarUrl;
		return true;
	}
	return false;
};

// 在组件挂载时检查本地缓存
onMounted(() => {
	getUserInfo();
});

const handleCompute = (type) => {
	switch (type) {
		case 'myFormula':
			Taro.navigateTo({
				url: '/pages/myFormula/index',
			});
			break;
		case 'reference':
			Taro.navigateTo({
				url: '/pages/reference/index',
			});
		case 'collect':
			Taro.navigateTo({
				url: '/pages/myFormula/index',
			});
		case 'notice':
			Taro.navigateTo({
				url: '/pages/notice/index',
			});
		case 'about':
			Taro.navigateTo({
				url: '/pages/about/index',
			});
		default:
			break;
	}
};

const handleClick = () => {
	// 先尝试从缓存获取用户信息
	if (!getUserInfo()) {
		// 如果没有缓存，则获取用户信息
		Taro.getUserProfile({
			desc: '用于完善会员资料',
			success: (res) => {
				userInfo.nickName = res.userInfo.nickName;
				userInfo.avatarUrl = res.userInfo.avatarUrl;
				// 存储用户信息到本地
				Taro.setStorageSync('userInfo', res.userInfo);
			},
		});
	}
};
</script>
